<template>
  <div class="app-container">
    <div class="container">
      <div class="container_left" @click="handleGo('data-tracking-fb')">
        <el-card class="box-card" shadow="hover">
          <div class="card">
            <svg-icon icon-class="facebook-pixel" style="width: 180px;height: 60px"></svg-icon>
            <div class="card-text">
              <div class="left_card">Facebook Multi Pixels</div>
              <span class="left_title">免费工具</span>
              <div class="title">这是一款基于Facebook Pixels的数据追踪上报工具，支持多Pixels绑定你的网站
                且支持按商品专辑绑定，方便你去衡量每个商品专辑的广告投放收益
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="container_left" @click="handleGo('fb-re-tracking')">
        <el-card class="box-card" shadow="hover">
          <div class="card">
            <svg-icon icon-class="fb-re-tracking" style="width: 180px;height: 60px"></svg-icon>
            <div class="card-text">
              <div class="left_card">Facebook 数据辅助工具</div>
              <span class="left_title">免费工具</span>
              <div class="title">精准高效解决 Apple iOS 14 隐私政策导致的 Facebook 广告数据缺失问题，让优化师准确把握广告效果，精准投放。
              </div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="container_left" @click="handleGo('data-tracking-google')">
        <el-card class="box-card" shadow="hover">
          <div class="card">
            <svg-icon icon-class="google" style="font-size: 80px;height: 60px"></svg-icon>
            <div class="card-text">
              <div class="left_card">Google跟踪代码</div>
              <span class="left_title">免费工具</span>
              <div class="title">可添加Google Analytics的跟踪代码和谷歌广告转化跟踪代码</div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="container_left" @click="handleGo('google-ads')">
        <el-card class="box-card" shadow="hover">
          <div class="card">
            <svg-icon icon-class="ads" style="font-size: 80px;height: 60px"></svg-icon>
            <div class="card-text">
              <div class="left_card">Google Ads</div>
              <span class="left_title">免费工具</span>
              <div class="title">添加Google Ads转化跟踪事件代码，精准衡量用户与广告的互动，做出更明智的广告支出决策</div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="container_left" @click="handleGo('google-feed')">
        <el-card class="box-card" shadow="hover">
          <div class="card">
            <img src="../../assets/images/Googlefeed.png">
            <div class="card-text">
              <div class="left_card">Google Feed 商品同步</div>
              <span class="left_title">免费工具</span>
              <div class="title">同步商品信息到 Google 卖家中心，方便您进行投放 Google 广告</div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="container_left" @click="handleGo('fb-messenger')">
        <el-card class="box-card" shadow="hover">
          <div class="card">
            <img src="../../assets/images/facebook-messenger.png">
            <div class="card-text">
              <div class="left_card">Facebook Messenger</div>
              <span class="left_title">免费工具</span>
              <div class="title">Facebook 的官方在线沟通插件，顾客可通过该插件与你联系</div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="container_left" @click="handleGo('fb-domain')">
        <el-card class="box-card" shadow="hover">
          <div class="card">
            <svg-icon icon-class="facebook-site" style="font-size: 60px"></svg-icon>
            <div class="card-text">
              <div class="left_card">Facebook网域验证</div>
              <span class="left_title">免费工具</span>
              <div class="title">输入Facebook网域验证代码进行网域验证</div>
            </div>
          </div>
        </el-card>
      </div>
      <div class="container_left" @click="handleGo('tiktok-pixel')">
        <el-card class="box-card" shadow="hover">
          <div class="card">
            <img src="../../assets/images/tiktok.png">
            <div class="card-text">
              <div class="left_card">TikTok Multi Pixel</div>
              <span class="left_title">免费工具</span>
              <div class="title">TikTok作为全球最热门短视频APP，处于商业化广告红利期，这款应用插件通过深度技术打通数据跟踪，增强广告投放效果</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: 'tools-list',
    data () {
        return {
            fixOption: {fixedHeader: true},
            list: null,
            listLoading: true,
            loadingBtn: false,
            pageParams: {
                page: 1,
                pageSize: 20,
                name: ''
            }
        };
    },
    methods: {
        handleGo (name) {
            this.$router.push({name});
        }
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    }

};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.container_left {
  width: 360px;
  height: 260px;
  margin: 0 0 20px 40px;
  border-radius: 5px;
  cursor: pointer;
}

.box-card {
  //  width:100%;
  height: 260px;
  padding: 20px 0 0 20px;
  line-height: 30px;
}

.card {
  display: flex;
  flex-direction: row;
  align-items: self-start;
}

.box-card img {
  height: 50px;
  width: 50px;
  color: rgb(90, 90, 90);
}

.card-text {
  margin-left: 15px;
}

.left_card {
  align-items: center;
  align-content: center;
  font-size: 18px;
  font-weight: 500;
}

.left_title {
  font-size: 14px;
  color: #30344f
}

.title {
  font-size: 14px;
  color: #7e849c
}

.container_right {
  width: 200px;
  height: 260px;
  border-radius: 5px;
  cursor: pointer;
}
</style>
